<template>
	<div class="subject_list_wrapper">
		<div class="head">
			<el-form :inline="true" :model="listQuery" size="medium">
				<el-form-item><el-input v-model="listQuery.content" placeholder="题目标题" clearable></el-input></el-form-item>
				<el-form-item>
					<el-select v-model="listQuery.type" placeholder="题目类型" clearable>
						<el-option label="单选题" value="1"></el-option>
						<el-option label="多选题" value="2"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item><el-button type="primary" @click="getSubjectListData">查询</el-button></el-form-item>
				<el-form-item><el-button type="primary" @click="handleAddSubject('1')">单选题</el-button></el-form-item>
				<el-form-item><el-button type="primary" @click="handleAddSubject('2')">多选题</el-button></el-form-item>
				<el-form-item><el-button type="primary" @click="handleAddSubject('3')">填空题</el-button></el-form-item>
				<el-form-item><el-button type="primary" @click="handleAddSubject('4')">判断题</el-button></el-form-item>
				<el-form-item><el-button type="primary" @click="handleAddSubject('5')">问答题</el-button></el-form-item>
			</el-form>
		</div>
		<div class="table" v-loading="loading">
			<el-table :data="subjectListData" style="width: 100%" row-key="id" :expand-row-keys="expandData" @row-click="handleRowClick">
				<el-table-column type="expand">
					<template slot-scope="{ row }">
						<div class="subject_options">
							<p v-for="(n, i) in row.options">{{ n.key }}、 {{ n.label }}</p>
						</div>
					</template>
				</el-table-column>
				<el-table-column prop="content" label="题目标题" min-width="360"></el-table-column>
				<el-table-column prop="type" label="题目类型" min-width="120">
					<template slot-scope="{ row }">
						<el-tag v-if="row.type === '1'">单选题</el-tag>
						<el-tag v-else-if="row.type === '2'">多选题</el-tag>
						<el-tag v-else-if="row.type === '3'">填空题</el-tag>
						<el-tag v-else-if="row.type === '4'">判断题</el-tag>
						<el-tag v-else-if="row.type === '5'">问答题</el-tag>
					</template>
				</el-table-column>
				<el-table-column prop="createTime" label="创建时间" min-width="180"></el-table-column>
				<el-table-column label="操作" width="136">
					<template slot-scope="{ row }">
						<el-button-group>
							<el-button size="small" type="warning" @click="handleEditSubject(row)">编辑</el-button>
							<el-button size="small" type="danger" @click="handleDeleteSubject(row.id)">删除</el-button>
						</el-button-group>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="page"><Pagination :total="dataCount" @change="getSubjectListData" :page.sync="listQuery.page" :limit.sync="listQuery.limit" /></div>
		<subject-form v-model="subjectDialog" :data="subjectData" :subject-type="subjectType" @finish="getSubjectListData"></subject-form>
	</div>
</template>

<script>
import subjectForm from './subjectForm';
import { tbQuestionnaireContentDelete, tbQuestionnaireContentQuery } from '@/api/admin/survey/tbQuestionnaireContent';
export default {
	components: { subjectForm },
	data() {
		return {
			loading: false,
			listQuery: {
				page: 1,
				limit: 10
			},
			dataCount: 0,
			letterArr: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
			subjectList: [],
			subjectDialog: false,
			subjectData: {},
			subjectType: '',
			expandData: []
		};
	},
	computed: {
		subjectListData() {
			return this.subjectList.map(item => {
				let obj = { ...item };
				let optionArr = Object.keys(obj).filter(v => v.indexOf('questionOption') !== -1);
				obj['options'] = optionArr.map((v, i) => {
					return {
						key: this.letterArr[i],
						label: obj[v]
					};
				});
				return obj;
			});
		}
	},
	mounted() {
		this.getSubjectListData();
	},
	methods: {
		//获取题目列表
		async getSubjectListData() {
			let result = await tbQuestionnaireContentQuery(this.listQuery).then(res => res.data);
			if (result.code === '0') {
				this.expandData = [];
				this.dataCount = parseInt(result.count);
				this.subjectList = !result.data ? [] : [...result.data];
			}
		},

		//添加题目
		handleAddSubject(type) {
			this.subjectData = {};
			this.subjectType = type;
			this.subjectDialog = true;
		},

		//修改题目
		handleEditSubject(data) {
			this.subjectData = { ...data };
			this.subjectType = data.type;
			this.subjectDialog = true;
		},

		//删除题目操作
		handleDeleteSubject(id) {
			let that = this;
			this.$confirm('此操作将永久删除该题目, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning',
				async beforeClose(action, instance, done) {
					if (action === 'confirm') {
						instance.confirmButtonLoading = true;
						await that.deleteSubjectRequest(id);
						instance.confirmButtonLoading = false;
						done();
					} else {
						done();
					}
				}
			}).catch(() => {});
		},

		//删除题目请求
		async deleteSubjectRequest(id) {
			let result = await tbQuestionnaireContentDelete(id).then(res => res.data);
			if (result.code === '0') {
				this.$message.success('题目删除成功');
				this.getSubjectListData();
			}
		},

		//展开
		handleRowClick(row, column, event) {
			if (column.id === 'el-table_1_column_2') {
				if (this.expandData.some(item => item === row.id)) {
					let index = this.expandData.findIndex(item => item === row.id);
					this.expandData.splice(index, 1);
				} else {
					this.expandData.push(row.id);
				}
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.subject_list_wrapper {
	.head {
		display: flex;
		justify-content: space-between;
		flex-shrink: 0;
		.el-form-item {
			margin: 0 10px 0 0;
		}
	}
	.table {
		flex: 1;
	}
}
.subject_options {
	padding-left: 58px;
}
</style>
